<template>
  <!-- 消息推送弹窗 -->
  <div class="notice-modal">
    <div class="notice-item">
      <div class="left">
        <div class="left-content">
          <span class="iconfont icon-bell icon"></span>
        </div>
      </div>
      <div class="right">
        <el-carousel indicator-position="none" arrow="never" height="76px" :interval="4000"  direction="horizontal" :loop="messageList.length>1">
          <el-carousel-item v-for="(item,index) in messageList" :key="item.id"  @click="goToLink(item,index)">
            <div class="right-top">
              <div class="title">{{ messageType[item.noticeType] || '' }}</div>
              <el-icon @click.stop="close(item)">
                <Close />
              </el-icon>
            </div>
            <div class="text">
              <span>{{ item.goodsName || '' }}</span>
              <span>/</span>
              <span>{{ item.productName || '' }}</span>
              <span>{{ item.content || "" }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

  </div>
</template>

<script setup>
import { messageType } from "@/config/dictionary"
const store = useStore()
const messageList = computed(() => {
  return store.state.notice.noticeList
})
const emits = defineEmits(['to-link', 'close'])
//跳转页面
const goToLink = (item,index) => {
  emits('to-link', {item,index})
}
//关闭
const close = (item) => {
  emits('close', item)
}
</script>
<style lang="scss" scoped>
.notice-modal {
  position: absolute;
  left: -260px;
  top: 54px;
  height: 100px;
  width: 320px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.15);

  .notice-item {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .left {
    width: 40px;

    .left-content {
      margin-top: 4px;

      .icon {
        font-size: 24px;
        font-weight: 700;
        color: #409eff;
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    // width: 100%;
    // margin-left: 12px;

    .right-top {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 700;
      color: #666;
    }

    .text {
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -moz-box;
      -moz-box-orient: vertical;
      -moz-line-clamp: 2;
      height: 48px;
      padding-right: 16px;
      margin-top: 6px;
      font-size: 14px;
      line-height: 24px;
      color: #999;
    }
  }
}
</style>